<div class="card">
  <div class="upper-part">
    <div class="upper-part-face">Hover Me</div>
    <div class="upper-part-back">Some Additional Information At The Back Side</div>
  </div>
  <div class="lower-part">
    <div class="lower-part-face">Face Side</div>
    <div class="lower-part-back">Back Side</div>
  </div>
</div>
<style>
/* From Uiverse.io by zakareaaljundi - Tags: card, flip */
.card {
  width: 190px;
  height: 254px;
  position: relative;
  border-radius: 40px;
  transition: all 0.8s;
  perspective: 600px;
  perspective-origin: center bottom;
}

.upper-part {
  width: 100%;
  height: 65%;
  border-radius: 40px 40px 0 0;
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.9s;
}

.upper-part-face,
.upper-part-back {
  text-align: center;
  background-color: lightgray;
  color: purple;
  border: 3px solid purple;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 15px;
  border-radius: 40px 40px 0 0;
  font-weight: bold;
  z-index: 2;
  backface-visibility: hidden;
  transition: all 0.6s;
}

.upper-part-back {
  background-color: purple;
  color: lightgray;
  transform: rotatex(180deg);
}

.lower-part {
  width: 100%;
  height: 35%;
  border-radius: 0 0 40px 40px;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center top;
  transition: all 0.9s;
}

.lower-part-face,
.lower-part-back {
  background-color: purple;
  width: 100%;
  height: 100%;
  color: lightgray;
  font-weight: bold;
  position: absolute;
  border-radius: 0 0 40px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(0, -0.8px);
  backface-visibility: hidden;
  z-index: 2;
}

.lower-part-back {
  backface-visibility: visible;
  border-radius: 40px;
  color: purple;
  background-color: lightgray;
  transform: rotateX(180deg);
  z-index: 1;
  transition: border-radius 0.6s;
}

.card:hover > .upper-part {
  transform: rotatex(-0.5turn);
}

.card:hover > .lower-part {
  transform: translateY(88.3px) rotateX(0.5turn);
}

.card:hover > .lower-part > .lower-part-back {
  border: 3px solid purple;
  border-radius: 0 0 40px 40px;
}
</style>
